<template>
    <div style="padding:10px;margin-top:10px;background-color: white;">
        <div class="mb-10">
            <AButton type="primary" :currentGoods="state.currentGoods" @click="addGoods">新增</AButton>
        </div>
        <ATable :data-source="state.dataSource" :columns="columns" bordered :pagination="false">
            <template #bodyCell="{text,column,record}">
                
                <template v-if="column.dataIndex=='pageUrl'">
                    {{ `/pages/goods/index?goodsCategoryId=${record.goodsCategoryId}` }}
               </template>
                <template v-if="column.dataIndex=='type'">
                    <span v-if="text === GoodsTypeEnum.THING">实物</span>
                    <span v-if="text === GoodsTypeEnum.SERVICE">服务</span>
                </template>
            </template>
        </ATable>
    </div>
    <GoodsCategoryModal 
    :current-goods="state.currentGoods" 
    v-if="state.goodsCtategoryModalVisibel"
    @cancel="cancelGoodsModal"
    @ok="goodsModalOk"></GoodsCategoryModal>
</template>
<script lang="ts" setup>
import {reactive,h,onMounted} from "vue";
import Search from '@/components/Search/Search.vue';
import Pagination from "@/components/Pagination/index.vue";
import { GoodsCategoryTypes,CommontTypes, PageResult, ResponseVo,GoodsTypeEnum} from "@/type"
import { GoodsCategoryService } from "@/service";
import GoodsCategoryModal from "./components/GoodsCategoryModal.vue"
import {Button, Popconfirm, message} from "ant-design-vue";

const columns = [
    {title:"品类ID",dataIndex:"goodsCategoryId"},
    {title:"品类名称",dataIndex:"goodsCategoryName"},
    {title:"页面路径",dataIndex:"pageUrl"},
    {title:"商品类型",dataIndex:"type"},
    {title:"创建人",customRender:({record}:{record:GoodsCategoryTypes.GoodsCategoryItem})=>{
        return h('div',{},`${record.creator}/${record.createTime}`)
    }},
    {title:"修改人",customRender:({record}:{record:GoodsCategoryTypes.GoodsCategoryItem})=>{
        return h('div',{},record.updator?`${record.updator}/${record.updateTime}`:'-')
    }},
    {title:"操作",customRender:({record}:{record:GoodsCategoryTypes.GoodsCategoryItem})=>{
        return h('div',{},[
            h(Button,{type:"text",onClick:()=>editGoods(record)},"编辑"),
            h(Popconfirm,{title:"确认执行此操作",onConfirm:()=>deleteGoods(record)},[ h(Button,{type:"text"},"删除")])
           
        ])
    }}
]

const state = reactive<{
    dataSource:GoodsCategoryTypes.GoodsCategoryItem[],
    goodsCtategoryModalVisibel: boolean,
    currentGoods:Partial<GoodsCategoryTypes.GoodsCategoryItem>
}>({
    dataSource:[],
    goodsCtategoryModalVisibel:false,
    currentGoods:{}
})

onMounted(()=>{
    handleSearch()
})

const handleSearch = async()=>{
    const res:ResponseVo<GoodsCategoryTypes.GoodsCategoryItem[]>= await GoodsCategoryService.findAllGoodsCategory();
    if(res.code===0){
        state.dataSource = res.data;
    }
}





const addGoods = ()=>{
    state.goodsCtategoryModalVisibel = true;
    state.currentGoods = {};
}

const editGoods = async(record:GoodsCategoryTypes.GoodsCategoryItem)=>{
    state.currentGoods ={};
    let res:ResponseVo<GoodsCategoryTypes.GoodsCategoryItem> =await GoodsCategoryService.detailGoodsCategory(record.goodsCategoryId);
    if(res.code===0){
        state.currentGoods = {...res.data};
        console.log("state.currentGoods--->",state.currentGoods);
        state.goodsCtategoryModalVisibel = true;
    }
}

const deleteGoods = async(record:GoodsCategoryTypes.GoodsCategoryItem)=>{
    let res:ResponseVo<GoodsCategoryTypes.GoodsCategoryItem> =await GoodsCategoryService.deleteGoodsCategory(record.goodsCategoryId);
        if(res.code===0){
            message.success("操作成功!");
            handleSearch(); 
        }
}

const cancelGoodsModal = ()=>{
    state.goodsCtategoryModalVisibel = false;
}

const goodsModalOk = ()=>{
    state.goodsCtategoryModalVisibel = false;
    handleSearch();
}

</script>
<style lang="ts" setup>

</style>

